import { useMainStore } from '@/store/index'
import { useMainLogin } from '@/store/user'

import { resetBasic } from '@/api/header'

let driver = window.driver.js.driver;
let driverPart1:any

export const startDrive = () => {
  const store = useMainStore()
  const user = useMainLogin()
  user.isFirst = false
  resetBasic({ basicId: user.basicInfo.basicId, isFirst:false})
  // const steps = [
  //   { element: '#first-element-introduction', popover: { title: '欢迎来到立度时空平台！', description: '双击此处可以自定义平台名称哦，来试试吧！', side: "bottom", align: 'start' }},
  //   { element: '#second-element-introduction', popover: { title: '使用测量工具', description: '平台提供了准确的测量工具，点击此处打开测量工具。', side: "bottom", align: 'start' }},
  //   { element: '#third-element-introduction', popover: { title: '使用测量工具', description: '选择一种测量方式，然后在地图上随意点击后双击完成第一次测量吧，需点击下方结束测量按钮结束测量。', side: "bottom", align: 'start' }},
  //   { element: '#transition', popover: { title: '使用标绘工具', description: '您真棒！接下来尝试在地图上标注第一个点吧。', side: "bottom", align: 'start' }},
  //   { element: '#forth-element-introduction', popover: { title: '使用标绘工具', description: '点击此处打开点标注工具。', side: "bottom", align: 'start' }},
  //   { element: '#fifth-element-introduction', popover: { title: '使用标绘工具', description: '点击“画笔”后在地图上点击。', side: "bottom", align: 'start' }},
  //   { element: '#transition', popover: { title: '使用标绘工具', description: '您成功绘制了第一个点，从下方弹出的界面中您可以上传各种和该点有关的文件，欢迎尝试或者跳至下一步。', side: "bottom", align: 'start' }},
  //   { element: '#sixth-element-introduction', popover: { title: '了解“边界”功能', description: '在“边界”功能中，您可以上传边界、范围等数据，而且支持点击查询哦。', side: "bottom", align: 'start' }},
  //   { element: '#seventh-element-introduction', popover: { title: '了解“影像”功能', description: '在“影像”功能中，可以添加不同时期、地域的影像，在线随时查看。', side: "bottom", align: 'start' }},
  //   { element: '#eighth-element-introduction', popover: { title: '了解“实景三维”功能', description: '在“实景三维”功能中，支持加载实景三维和BIM模型等，解决三维模型查看困难的问题。', side: "bottom", align: 'start' }},
  //   { element: '#ninth-element-introduction', popover: { title: '恭喜你完成教程，开始使用吧。', side: "bottom", align: 'start' }},
  // ]
  // !user.basicInfo.districtName?steps.push({ element: '#tenth-element-introduction', popover: { title: '还未选择区县边界，请进行选择。', side: "bottom", align: 'start' }}):''

  const steps = [
    { element: '#first-element-introduction', popover: { title: '欢迎来到立度时空平台！', description: '点击此处可以自定义平台名称哦，例如“城乡大数据信息化平台”，来试试吧！', side: "bottom", align: 'start' }},
    { element: '#second-element-introduction', popover: { title: '接下来点击此处获取你所在的区域。', side: "bottom", align: 'start' }},
    { element: '#transition', popover: { title: '使用测量工具', description: '您真棒！接下来了解一下测量工具吧!', side: "bottom", align: 'start' }},
    { element: '#third-element-introduction', popover: { title: '使用测量工具', description: '平台提供了准确的测量工具，点击此处打开测量工具。', side: "bottom", align: 'start' }},
    { element: '#forth-element-introduction', popover: { title: '使用测量工具', description: '选择一种测量方式，然后在地图上随意点击后双击完成第一次测量吧，需点击下方结束测量按钮结束测量。', side: "bottom", align: 'start' }},

    { element: '#transition', popover: { title: '了解其它工具', description: '您真棒！接下来我们了解一下其它工具。', side: "bottom", align: 'start' }},
    { element: '#fifth-element-introduction', popover: { title: '使用标绘工具', description: '右侧三个图标分别对应点、线、面的标注，支持数据统计和文件管理。', side: "bottom", align: 'start' }},
    { element: '#sixth-element-introduction', popover: { title: '了解边界、影像和三维', description: '右侧三个图标分别对应边界、影像和三维，在“边界”功能中，您可以上传范围数据；在“影像”功能中，可以添加不同时期、地域的影像；在“实景三维”功能中，支持加载实景三维模型。', side: "bottom", align: 'start' }},
    { element: '#transition', popover: { title: '恭喜你完成教程，开始使用吧。', side: "bottom", align: 'start' }},
  ]
  driverPart1 = driver({
    showProgress: true,
    nextBtnText: '下一步',
    prevBtnText: '上一步',
    doneBtnText: !user.basicInfo.districtName?'去设置':'开始使用',
    allowClose: true,
    steps: steps,
    onNextClick: (element,step,options)=> {
      driverPart1.moveNext();
      let timer = setInterval(()=>{
        try{
          let driverBox = document.querySelectorAll('.driver-popover-close-btn')[0]
          driverBox.innerHTML = '跳过全部' 
        }catch{

        }

        // let popover = document.querySelectorAll('.driver-popover')[0]
        // popover.className = '.driver-popover'
        clearInterval(timer)
      },300)
      user.isFirst = true
      if (driverPart1.getActiveIndex() == 1) {
        store.activeBtn = 1
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == 2) {
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == 3) {
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == 4) {
        store.activeBtn = 3
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == undefined) {
        user.isFirst = false
        store.activeBtn = -1
      } else {
        user.isFirst = false
        store.activeBtn = -1
      }
    },
    onPrevClick: (element,step,options)=> {
      driverPart1.movePrevious()
      let timer = setInterval(()=>{
        let driverBox = document.querySelectorAll('.driver-popover-close-btn')[0]
        driverBox.innerHTML = '跳过全部' 
        clearInterval(timer)
      },300)
      if(driverPart1.getActiveIndex() == 1) {
        store.activeBtn = 1
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == 2) {
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == 3) {
        user.isFirst = true
      } else if(driverPart1.getActiveIndex() == 4) {
        store.activeBtn = 3
        user.isFirst = true
      }else if(driverPart1.getActiveIndex() == 6) {
        store.activeBtn = 3
        user.isFirst = true
      } else {
        user.isFirst = false
        store.activeBtn = -1
      }
    },
    onCloseClick:(element,step,options)=> {
      user.isFirst = false
      driverPart1.drive(-1);
    }
  });
  driverPart1.drive();
  let driverBox = document.querySelectorAll('.driver-popover-close-btn')[0]
  driverBox.innerHTML = '跳过全部' 
}

export const driverNext = () => {
  driverPart1.moveNext();
  let timer = setInterval(()=>{
    let driverBox = document.querySelectorAll('.driver-popover-close-btn')[0]
    driverBox.innerHTML = '跳过全部' 
    clearInterval(timer)
  },300)
}

export const driveTurnto = (index) => {
  const user = useMainLogin()
  driverPart1.drive(index);
  if (index==-1) {
    user.isFirst = true
  } else {
    user.isFirst = false
  }
  let timer = setInterval(()=>{
    let driverBox = document.querySelectorAll('.driver-popover-close-btn')[0]
    driverBox.innerHTML = '跳过全部' 
    clearInterval(timer)
  },300)
}
